<template>
  <el-card style="margin-bottom: 10px">
    <div>
      <span style="font-size: 19px;font-weight:bold">我的收藏</span>
    </div>
  </el-card>
  <el-card>
  <div class="goodsList">
    <ul>
      <li v-for="(collect,index) in pageInfo.list" :key="index" >
        <div class="pic"><el-image :src="`${SERVER_ADDR}/goods/pic/${collect.goods.picList[0].url}`" @click="toGoodsView(collect.goods.id)" /></div>
        <div class="name">{{ collect.goods.name }}</div>
        <div class="dscp">{{ collect.goods.dscp }}</div>
        <div class="price">$ {{ collect.goods.price }}</div>
        <div style="margin-top: 10px;margin-bottom: 10px">
          <el-button type="danger"  size="small" @click="cancelCollect(collect.id)"><el-icon><Star/></el-icon>取消收藏</el-button>
        </div>
      </li>
    </ul>
    <el-row class="row-bg" justify="center" style="margin-top: 20px;">
      <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                     @change="selectByPage"/>
    </el-row>
  </div>
  </el-card>
</template>

<script setup>
import {ref} from "vue";
import collectApi from "@/api/collectApi.js";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const router = useRouter();
//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
const name = ref({
  input:null
})
//服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)

//查询所有收藏
function selectByPage(pageNum){
  collectApi.selectByPage(pageNum,8)
      .then(resp => {
        pageInfo.value = resp.data;
      })
}
//跳转到商品详情页面
function toGoodsView(id){
  router.push({
    path:'/user/goods', //跳转到的位置，值和页面路由种的配置的路径相同
    query:{
      id
    }
  });
}
//取消收藏
function cancelCollect(id){
  collectApi.delete(id)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum);
        }else {
          ElMessage.error(resp.msg);
        }
      })
}

selectByPage(1);
</script>

<style scoped>
.goodsList ul li{
  width: 220px;
  float: left;
  margin-right: 20px;
  text-align: center;
  background-color: #EEE;
  margin-bottom: 20px;
  margin-top: 20px;
  cursor: pointer;
}
.goodsList ul li:hover{
  box-shadow: 0px 0px 20px #000;

}
.goodsList ul li:nth-child(4n){
  margin-right: 10px;
}
.name,.dscp,.price{
  line-height: 25px;
}
.name{
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dscp{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>